<template>
  <div class="mod-config">
    <el-card class="box-card search-input" shadow="never">
      <el-form  label-width="120px"  size="mini" :model="dataForm" @keyup.enter.native="findPage()">
        <el-row>
          <el-col :span="6">
            <el-form-item label="受理编号：">
              <el-input v-model="dataForm.number" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="直播标题：">
              <el-input v-model="dataForm.liveTitle" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商家名称：">
              <el-input v-model="dataForm.shopName" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="主播账号：">
              <el-input v-model="dataForm.account" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="违规类型：">
              <cy-select url="/api/v1/liveReportInfo/findAllReportType" v-model="dataForm.typeId"></cy-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="受理状态：">
              <cy-select url="/api/v1/broadcast/config/live_report_status/val" :all-option="true" v-model="dataForm.status"></cy-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="直播编号：">
              <el-input v-model="dataForm.liveNumber" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :offset="3"></el-col>
          <el-col :span="24" style="text-align: center;">
            <el-form-item label-width="0px">
              <el-button type="primary" @click="$refs.CyTable.query(dataForm)">查询</el-button>
              <el-button @click="reset()">重置</el-button>
              <!--                            <el-button type="primary" @click="showEdit">新增举报</el-button>-->
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-card>
    <LiveReportInfoListTable
      url="/api/v1/liveReportInfo/list"
      :showSelection="true"
      :showBatchDelete="true"
      :max-height="600"
      :highlightCurrentRow="true"
      :operationWidth="250"
      :totalSize="totalSize"
      :columns="filterColumns"
      :showEditOperation="true"
      :showDeleteOperation="false"
      @handleDelete="handleDelete"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleReport="handleReport"
      ref="CyTable"
    >
    </LiveReportInfoListTable>
    <el-dialog
      width="50%"
      :title="operationText"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      @close="editCancel">
      <el-row v-loading="editLoading">
        <el-form  label-width="120px" ref="editDataForm" size="mini"  :model="editDataForm">
          <el-col :span="24">
            <el-form-item label="举报时间：" prop="createTime">
              <div>{{editDataForm.createTime}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="违规类型：" prop="type">
              <div>{{editDataForm.type}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主播账号：" prop="account">
              <div>{{editDataForm.account}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="受理编号：" prop="number">
              <div>{{editDataForm.number}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="举报截图：">
              <div v-for="(item,index) in editDataForm.pics" :key="index">
                <img :src="item">
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="举报内容：" prop="content">
              <div>{{editDataForm.content}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10" offset="8">
            <el-button size="mini" v-if="editDataForm.status==28" type="primary" @click="editHandleReport()">受理</el-button>
            <div v-else-if="editDataForm.status==29">已受理</div>
          </el-col>
        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
  import CyTable from "./component/CyTable";
  import CySelect from "./component/CySelect";
  import CyFileUpload from "./component/CyFileUpload";
  import LiveReportInfoListTable from "./component/LiveReportInfoListTable";
  export default {
    components: {
      CyTable,
      CySelect,
      CyFileUpload,
      LiveReportInfoListTable
    },
    data() {
      return {
        loading: false,
        moreBtnDisable: true,
        status: [{
          value: 28,
          label: '受理中'
        }, {
          value: 29,
          label: '已受理'
        }],
        createTime: [],
        time: [],
        dataForm: {},
        editDataForm: {
          type: 0,
          status:0,
          pics:[],
        },
        imageAddBtn:{
          width: '180px',
          height: '120px',
          marginBottom: '10px'
        },

        columns: [],
        filterColumns: [],
        bannerList:[],
        pageRequest: {pageNum: 1, pageSize: 10},
        totalSize: 0,
        operationText: '新增举报',
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        countNumForm: {
          allShopNum: '',
          onlineNum: '',
          offlineNum: ''
        },
      }
    },
    mounted: function () {
      this.columns = [
        {prop: "id", label: "举报编号", minWidth: 120},
        // {prop: "pic", label: "举报图片", minWidth: 120, showType:'image',imgSize:{width:60,height:60}},
        {prop: "shopName", label: "商家名称", minWidth: 120},
        {prop: "liveNumber", label: "直播编号", minWidth: 120},
        {prop: "liveTitle", label: "直播标题", minWidth: 180},
        {prop: "account", label: "主播账号", minWidth: 180},
        {prop: "type", label: "违规类型", minWidth: 180},
        {prop: "statusVal", label: "受理状态", minWidth: 120},
        {prop: "number", label: "受理编号", minWidth: 120},
        {prop: "createTime", label: "举报时间", minWidth: 180},
        {prop: "creator", label: "举报人账号", minWidth: 180}
      ];
      let temp = [];
      this.columns.forEach(function (key, val) {
        temp.push(key);
      });
      this.filterColumns = temp;
    },
    methods: {
      //自定义按钮
      handleBtbCustom:function(params){
        let status = params.row.status;
        let banAnchor="确认禁播吗？";
        if(status==26){
          banAnchor="确认取消禁播吗？";
        }
        this.$confirm(banAnchor, "提示", {}).then(() => {
          let id = params.row.id;
          let param = {"id": id, "status": status};
          let this_ = this;
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/anchorInfo/banAnchor',
            method: 'post',
            params: param
          }).then(result => {
            let data = result.data;
            if (data.code === '0') {
              this_.$refs.CyTable.findPage(this_.dataForm)
              this_.$forceUpdate();
            }
          })
        });
      },
      findPage() {
        this.$refs.CyTable.findPage(this.dataForm);
      },
      //重置
      reset() {
        this.dataForm = {};
        this.$refs.CyTable.resetForm(this.dataForm);
      },
      // 详情界面
      handleEdit: function (params) {
        this.dialogVisible = true;
        this.operationText = '查看举报内容';
        this.editDataForm = Object.assign({}, params.row);
        if(params.row.pic){
          this.editDataForm.pics = params.row.pic.split(",")
        }
        this.$nextTick(() => {
          if (this.$refs['editDataForm'] !== undefined) {
            this.$refs['editDataForm'].clearValidate();
          }
        });
      },
      showEdit(){
        this.operationText = '新增举报';
        this.dialogVisible = true;
      },
      // 编辑取消
      editCancel(){
        this.dialogVisible = false
        this.editDataForm = {
          type: 0
        };
      },
      handleReport(row){
        this.$confirm("确认受理吗？", "提示", {}).then(() => {
          this.loading=true;
          let id = row.id;
          let creator = row.creator;
          let liveNumber = row.liveNumber;
          let param = {"id": id, "status": 29,"liveNumber":liveNumber, "creator":creator};
          let this_ = this;
          this.utils.request.liveRequest({
            url: '/api/v1/liveReportInfo/accepted',
            method: 'post',
            params: param
          }).then(result => {
            let data = result.data;
            if (data.code === '0') {
              this_.$refs.CyTable.findPage(this_.dataForm)
              this_.$forceUpdate();
              this.$message({message: "受理成功", type: "info"});
            }else{
              this.$message({message: "操作失败, " , type: "error"});
            }
            this.loading=false;
          })
        });
      },
      editHandleReport(){
        this.$confirm("确认受理吗？", "提示", {}).then(() => {
          this.editLoading=true;
          let id = this.editDataForm.id;
          let creator = this.editDataForm.creator;
          let liveNumber = this.editDataForm.liveNumber;
          let param = {"id": id, "status": 29,"liveNumber":liveNumber, "creator":creator};
          let this_ = this;
          this.utils.request.liveRequest({
            url: '/api/v1/liveReportInfo/accepted',
            method: 'post',
            params: param
          }).then(result => {
            let data = result.data;
            if (data.code === '0') {
              this.findPage();
              this.editDataForm.status=29;
              this_.$forceUpdate();
              this.$message({message: "受理成功", type: "info"});
            }else{
              this.$message({message: "操作失败, " , type: "error"});
            }
            this.editLoading=false;
          })
        });
      },

      // 测试代码
      handleAvatarSuccess(res, file) {
        this.editDataForm.pic = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleDelete: function (params) {
        let ids = params.params;
        let delDataForm = [];
        ids.forEach(val=>{
          delDataForm.push(val)
        })
        if(delDataForm.length>0){
          let this_ = this;
          this.utils.request.liveRequest({
            url: '/api/v1/liveReportInfo/batchDelete',
            method: 'post',
            params: delDataForm
          }).then(result => {
            let data = result.data;
            if (data.code === '0') {
              this_.$refs.CyTable.findPage(this_.dataForm)
              this_.$forceUpdate();
              this.$message({message: "操作成功", type: "success"});
            }
          })
        } else {
          this.$message({message: "请选择需要删除的数据", type: "info"});
        }

      },
    }
  }
</script>
<style scoped lang="scss">

</style>
